<template>
  <div id="course_view">
    <div class="course_search">
      <div class="course_search_left">
        <i class="el-icon-search"></i>
        <input type="text" class="left_input" placeholder="Search ...">
      </div>
      <div class="course_search_right">
            <el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
              <el-option label="观看直播" value="live"></el-option>
              <el-option label="搜索课程" value="course"></el-option>
            </el-select>
      </div>
    </div>

    <div class="course_main">

      <div class="course_card" v-for="courseInfo in courseInfos" :key="courseInfo.courseId">
        <img :src="courseInfo.courseImgUrl" alt="" class="course_img">
        <div class="course_font_info">课程名： {{courseInfo.courseName}}</div>
        <div class="course_font_info">老师： {{courseInfo.teacherInfo.teaName}}</div>
        <div class="card_bottom_btn">
          <el-button round 
          @click="toLive(courseInfo.courseId, courseInfo)"
          ><i class="el-icon-video-play"></i>观看直播</el-button>
          <el-button type="primary"  @click="intoCourse(courseInfo.courseId, courseInfo.courseTeaId, courseInfo.teacherInfo.teaName)"
           round><i class="el-icon-edit"></i> 进入课程</el-button>
        </div>
      </div>

    </div>
 
  </div>
</template>

<script>
import * as API from '../api/course/index'
import * as LIVEAPI from '../api/live/index'

import {Storage} from '../storage'

export default {
  data() {
    return {
      searchSelect:"live",
      courseInfos:[]
    }
  },
  methods: {
    intoCourse(courseId, courseTeaId,courseTeaName) {
      console.log(courseId, courseTeaId)
      this.$router.push({
        name: "CourseInfo",
        params: {
          courseInfo: { courseId,courseTeaId,courseTeaName }
        }
      })
    },
    open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
    },
    toLive(courseId,courseInfo) {
      let urls = String(courseInfo.teacherInfo.livePullUrl).split("/")
      let stream = urls[urls.length - 2]


      LIVEAPI.theCourseIsStartLive(courseId, stream).then(res => {
        if(res.code == 200) {
          //课程开启
          // 如果课程开启          
          //一般课大约都在两个小时
          Storage.set("current_live", JSON.stringify({
            pullUrl:courseInfo.teacherInfo.livePullUrl,
            stream:stream, 
            courseId:courseId,
            liveName:res.data.liveName,
            courseName: courseInfo.courseName,
            teaId:courseInfo.teacherInfo.teaId,
            teaName: courseInfo.teacherInfo.teaName
            }), 2 * 60 * 60 * 1000)

          this.$router.push( {
            path:"/live",
          })

        }else {
          //课程没开启，不进行跳转
          this.$message.error(res.data.error)
        }
      })

    },
    getCourseInMyClass() {
      API.getCourseInMyClass().then(res => {
        if(res.code == 200) {
          this.courseInfos = res.data.courses
        }else {
          this.$message.error(res.data.error)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error("网络错误 :( ！ err:", err)
      })
    }
    
  },
  mounted() {
    this.getCourseInMyClass()
  }
};
</script>

<style>
#course_view {
    width: 100%;
    min-height: 1000px;
    margin-top: 8%;
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    align-items: center;

    /* justify-content: space-around; */
    /* 子元素 交叉轴居中布局 */
    /* align-items: center; */
    border-top-left-radius:40px;
    border-top-right-radius:40px;
    background-color: whitesmoke;
}

.course_search {
  min-width: 50%;
  border-radius: 15px;
  height: 55px;
  line-height: 55px;

  background-color: white;
  margin-top: -2%;  
  box-shadow: 0 2px 12px 0px rgb(0 0 0 / 10%);

  display: flex;
  justify-content: space-around;
}

.course_search_left {
  padding-left: 2%;
  width: 100%;
  /* height: 96%; */
  /* background-color: tomato; */
  flex: 0.75;
}

.course_search_right {
  flex: 0.2;
}

.course_search_right > .el-select > .el-input > input {
  /* outline:medium !important; */
  border: none !important;
  background: transparent !important;
}
/* 
.course_search_left > .el-icon-search {
  height: 22px !important;
} */

.left_input {
  background-color: transparent;
  margin-left: 3%;
  margin-top: 9px;
  /* margin-top: 2%; */
  font-size:18.5px;
  width: 90%;
  /* 去除边框 */
  border: none;
  /* 加上右边框，用来充当分割线 */
  border-right:solid rgb(204, 201, 201);
  /* line-height: 50px; */
  height: 35px;

  /* 在点击input的时候不显示输入框 */
  outline:medium;
  /* text-align:center; */
  vertical-align:top;
}

.course_main {
  margin-top: 1%;
  margin-left: 3%;
  /* margin-right: 3%; */
  /* padding-left: 2%; */
  width: 97%;
  min-height: 1000px;
  /* background-color: tomato; */

  display: flex;
  flex-direction: row;
  /* 换行 */
  flex-wrap: wrap;
  align-self: flex-start;
  align-content: flex-start;
}

.course_card {
  margin-left: 2.5%;
  margin-top: 3%;
  /* width: 260px; */
  width: 270px;
  /* width: 290px; */
  min-height: 262px;
  /* max-height: 280px; */
  border-radius: 15px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 13%);

  /* position: relative; */

}

.course_img {
  width: 100%;
  /* height: 165px; */
  /* border-radius: 15px; */
  /* margin: 2% 4%; */
  height: 152px;
  /* height: auto; */
  /* width: 270px; */
  /* background-repeat:'no-repeat';
  background-size:'cover'; */
}

.course_font_info {
  margin-top: 1%;
  margin-left: 4%;
  width: 100%;
  height: 22.77px;
  overflow: hidden;
}

.card_bottom_btn {
  margin-top: 3%;
  /* margin-left: 2%; */
  /* bottom: 2%; */
  /* top: 3%; */
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 32px;
}

.card_bottom_btn > .el-button {
  padding-top: 3% !important;
}

</style>